{% extends "base.html" %}

{% block title %}ODPS{% endblock %}

{% block head %}
  {{ super() }}
  <!-- DataTables -->
  <link rel="stylesheet" href="/static/css/dataTables.bootstrap.min.css">
  <!-- DataTables button -->

  <link rel="stylesheet" href="/static/css/buttons.bootstrap.min.css">
  <!-- DataTables searchPanes -->
  <link rel="stylesheet" href="/static/css/searchPanes.bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/select.bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/fixedColumns.bootstrap.min.css">

  <!-- daterange picker -->
  <link rel="stylesheet" href="/static/css/daterangepicker.css">

{% endblock %}

{% block content %}
  <!-- 页面头 -->
  <section class="content-header">
    <!--头部标题-->
    <h1>
      ODPS
      <!--    <small>advanced tables</small>-->
    </h1>
    <!--面包屑-->
    <ol class="breadcrumb">
      <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
      <li>云运营报表</li>
      <li class="active">ODPS</li>
    </ol>
  </section>


  <!-- 页面内容 -->
  <section class="content">
    <div class="row">
      <!--    顶部工具栏-->
      <div class="col-md-12">
        <form class="form-inline" id="search-form">
          <!-- Date range -->
          <div class="form-group">
            <label>查询日期范围：</label>
            <div class="input-group">
              <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
              <input type="text" class="form-control" id="daterange">
            </div>
            <!-- /.input group -->
          </div>
          <!-- /.form group -->
          <button type="submit" class="btn btn-primary">提交</button>
        </form>
      </div>
      <br/><br/>
      <div class="col-xs-12">
        <!--表格1-->
        <div class="box">
          <div class="box-header">
            {#            <h3 class="box-title">公共平台</h3>#}
          </div>

          <div class="box-body table-responsive">


            <table id="example" class="table-hover nowrap table-bordered  table-condensed table-striped"
                   style="font-size: 90%;width:100%">
              <thead>
              <tr>
                <th>组织</th>
                <th>项目</th>
                <th>ODPS project</th>
                <th>CPU消耗(核x小时)</th>
                <th>内存消耗(Gx小时)</th>
                <th>任务数</th>
                <th>存储使用量(G)</th>
                <th>存储配额(G)</th>
                <th>存储使用率</th>
              </tr>
              </thead>

              <tbody>
              <!-- 表格内容，由Datatables根据api返回自动填写 -->
              </tbody>
            </table>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->

      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </section>
  <!-- /.页面内容 -->



{% endblock %}


{% block script %}



  <!-- DataTables -->
  <script src="/static/js/jquery.dataTables.min.js"></script>
  <script src="/static/js/dataTables.bootstrap.min.js"></script>
  <!-- DataTables buttons-->
  <script src="/static/js/dataTables.buttons.min.js"></script>
  <script src="/static/js/buttons.bootstrap.min.js"></script>

  <script src="/static/js/jszip.min.js"></script>
  <script src="/static/js/pdfmake.min.js"></script>
  <script src="/static/js/vfs_fonts.js"></script>

  <script src="/static/js/buttons.html5.min.js"></script>
  <script src="/static/js/buttons.print.min.js"></script>
  <script src="/static/js/buttons.colVis.min.js"></script>



  {#  <script src="/static/js/buttons.colVis.min.js"></script>#}

  <!-- DataTables searchPanes-->
  <script src="/static/js/dataTables.searchPanes.min.js"></script>
  <script src="/static/js/searchPanes.bootstrap.min.js"></script>
  <script src="/static/js/dataTables.select.min.js"></script>

  <!-- DataTables others-->
  <script src="/static/js/dataTables.fixedColumns.min.js"></script>

  <!-- date-range-picker -->
  <script src="/static/js/moment.min.js"></script>
  <script src="/static/js/daterangepicker.js"></script>


  <!-- bootstrap datepicker -->
  {#  <script src="/static/js/bootstrap-datepicker.min.js"></script>#}

  <!-- Page specific script -->
  <script>
      $(document).ready(function () {
          var startDate;
          var endDate;
          //Date range picker
          $('#daterange').daterangepicker({
              startDate: moment().startOf('month'),
              endDate: moment().endOf('month'),
              ranges: {
                  '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                  '上周': [moment().subtract(6, 'days'), moment()],
                  '前30天': [moment().subtract(29, 'days'), moment()],
                  '上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                  '本月': [moment().startOf('month'), moment().endOf('month')],
              },
              locale: {
                  format: "YYYY-MM-DD", //设置显示格式
                  applyLabel: '确定', //确定按钮文本
                  cancelLabel: '取消', //取消按钮文本
                  customRangeLabel: '自定义',
                  daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                  monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                  firstDay: 1
              },
          }, function (start, end, label) {
              console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
          });


          var data = []   // 想一
          var init_start = moment().startOf('month').format('YYYYMMDD')
          var init_end = moment().endOf('month').format('YYYYMMDD')
          var table = $('#example').DataTable({
              language: {
                  "url": "/static/language.json"
              },
              //data: data,
              ajax: '/api/v1/cloud/get_odps_stats?start=' + init_start + '&end=' + init_end,
              columns: [
                  {data: 'org'},
                  {data: 'org_project'},
                  {data: 'project'},
                  {data: 'total_cpu_core_hours'},
                  {data: 'total_mem_gb_hours'},
                  {data: 'total_tasks'},
                  {data: 'data_size_gb'},
                  {data: 'quota_size_gb'},
                  {data: 'quota_used_percent'},
              ],
              processing: true,
              paging: true,
              lengthChange: false,
              searching: true,
              ordering: true,
              order: [[0, 'asc'], [1, 'asc'], [2, 'asc']],
              autoWidth: true,
              responsive: true,
              buttons: [ 'pageLength', 'excel',],
              initComplete: function () {
                    table.buttons().container().appendTo('#example_wrapper .col-sm-6:eq(0)')
              }
          });

          // 处理时间查询逻辑
          $('#search-form').on('submit', function (event) {
              event.preventDefault();         //阻止表单默认提交事件
              startDate = $('#daterange').data('daterangepicker').startDate.format('YYYYMMDD');
              endDate = $('#daterange').data('daterangepicker').endDate.format('YYYYMMDD');
              console.log(startDate, endDate)

              // 验证账号密码是否正确
              table.ajax.url('/api/v1/cloud/get_odps_stats?start=' + startDate + '&end=' + endDate).load();


          })


      });

  </script>
{% endblock %}